<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>贪吃蛇</title>
    <style>
      h1 {
        width: 500px;
        text-align: center;
      }
      .tips {
        background-color: azure;
        padding: 12px;
        width: 480px;
        text-align: center;
      }
      .snake-area {
        position: relative;
        background-color: rgb(243, 233, 220);
        border: 2px solid #d8d8d8;
        width: 500px;
        height: 360px;
      }
      .snake-li {
        position: absolute;
        top: 0;
        left: 0;
      }
      .snake,
      #snake {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: rgb(59, 94, 221);
      }
      #snake {
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        background-color: rgb(247, 75, 12);
      }
    </style>
  </head>
  <body>
    <h1>贪吃蛇</h1>
    姓名：<input type="text" id="userName" />
    <input type="button" id="kaishi" value="开始" onclick="kai()" />
    <div class="tips">
      方向键控制方块移动，遇到方块吃掉，方块增长，最快增长到10所耗费的时间最短为胜利。
    </div>
    <div class="snake-area">
      <div id="snake"></div>
      <div id="snake-li"></div>
    </div>
    <div id="time"></div>
    <script>
      function kai() {
        document.getElementById("snake").style.top = "170px";
        document.getElementById("snake").style.left = "240px"
        var timeStart = Date.now();
        var userName = document.getElementById("userName");
        var controllerDom = document.getElementById("snake");
        var cleft = parseInt(getComputedStyle(controllerDom).left);
        var ctop = parseInt(getComputedStyle(controllerDom).top);
        var shengyu = 10;
        var snakeWalk = []; // 记录蛇行走的脚步
        var snakeBody = []; // 记录蛇的身体

        var snakeHtml = ""; // 蛇身体的DOM字符串
        var snakeArr = []; // 蛇身体的位置数据

        // 生成被吃的蛇的身体
        console.log(100, shengyu);
        for (let i = 0; i < 10; i++) {
          const sTop = parseInt(Math.random() * 35) * 10;
          const sLeft = parseInt(Math.random() * 49) * 10;
          snakeArr.push([sTop, sLeft]);
          snakeHtml += `<div id="snake${i}" class="snake" style="left:${sLeft}px;top:${sTop}px;"></div>`;
        }
        console.log(666.001, snakeArr);
        document.getElementById("snake-li").innerHTML = snakeHtml;
        document.addEventListener("keydown", (e) => {
          if (e.key === "ArrowLeft") {
            cleft = cleft - 10;
          } else if (e.key === "ArrowRight") {
            cleft = cleft + 10;
          } else if (e.key === "ArrowUp") {
            ctop = ctop - 10;
          } else if (e.key === "ArrowDown") {
            ctop = ctop + 10;
          }
          if (cleft < 0 || cleft > 490 || ctop < 0 || ctop > 350) {
            alert("失败");
          }
          var curSnake = [ctop, cleft];
          snakeWalk.unshift(curSnake);
          snakeWalk.splice(11);
          console.log(666.003, curSnake, snakeWalk);
          const snakePos = snakeArr.findIndex(
            (el) => el[0] === ctop && el[1] === cleft
          );
          console.log(666.999, snakePos);
          if (snakePos > -1) {
            // document.getElementById("snake" + snakePos).style.display = "none";
            snakeBody.push(document.getElementById("snake" + snakePos));
            snakeArr[snakePos] = [-1, -1];

            shengyu--;
            if (shengyu === 0) {
              function end() {
                timeEnd = Date.now();
                console.log(666.001, timeEnd);

                var timeTake = Math.floor((timeEnd - timeStart) / 1000);
                alert("你的用时：" + timeTake + "秒");
              }
              end();
            }
          }
          console.log(666.333, snakeBody);
          snakeBody.forEach((el, index) => {
            console.log(999999, index, snakeWalk);
            el.style.top = snakeWalk[index + 1][0] + "px"; //为什么+1
            el.style.left = snakeWalk[index + 1][1] + "px";
          });
          controllerDom.style.left = cleft + "px";
          controllerDom.style.top = ctop + "px";
        });
      }
    </script>
  </body>
</html>
